import { readonly, ref, shallowRef } from 'vue'
import { defineStore } from 'pinia'
import Confirm from '@/pages/mine/becomeCreator/Confirm.vue'
import Contract from '@/pages/mine/becomeCreator/Contract.vue'
import IdentityProfile from '@/pages/mine/becomeCreator/IdentityProfile.vue'
import PhotoCapture from '@/pages/mine/becomeCreator/PhotoCapture.vue'
import UploadIdentity from '@/pages/mine/becomeCreator/UploadIdentity.vue'
import VerifyInfo from '@/pages/mine/becomeCreator/VerifyInfo.vue'
import { BECOME_CREATOR_ROUTES } from '@/constant'

export const useBecomeCreatorRouteStore = defineStore('becomeCreatorRoute', () => {
  const routes = ref([
    { value: BECOME_CREATOR_ROUTES.CONTRACT, component: shallowRef(Contract) },
    { value: BECOME_CREATOR_ROUTES.VERIFY_INFO, component: shallowRef(VerifyInfo) },
    { value: BECOME_CREATOR_ROUTES.UPLOAD_IDENTITY, component: shallowRef(UploadIdentity) },
    { value: BECOME_CREATOR_ROUTES.PHOTO_CAPTURE, component: shallowRef(PhotoCapture) },
    { value: BECOME_CREATOR_ROUTES.IDENTITY_PROFILE, component: shallowRef(IdentityProfile) },
    { value: BECOME_CREATOR_ROUTES.CONFIRM, component: shallowRef(Confirm) },
  ])

  const history = ref([BECOME_CREATOR_ROUTES.CONTRACT])

  const now = ref(BECOME_CREATOR_ROUTES.CONTRACT)

  function to(value) {
    if (now.value === value) return
    if (history.value.length === routes.value.length) return
    now.value = value
    history.value.push(value)
  }

  function back() {
    if (history.value.length <= 1) return
    history.value.pop()
    now.value = history.value[history.value.length - 1]
  }

  /** 成為創作者相關路由是否已經被啟用，用於啟用進入路由後的 side effect */
  const _isActive = ref(false)

  function activate() {
    _isActive.value = true
  }

  function deactivate() {
    _isActive.value = false
  }

  function reset() {
    history.value = [BECOME_CREATOR_ROUTES.CONTRACT]
    now.value = BECOME_CREATOR_ROUTES.CONTRACT
  }

  return { routes, now, to, back, isActive: readonly(_isActive), activate, deactivate, reset }
})
